<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>browser</title>
</head>
<body>
    <div id="root"></div>

    <script>
      console.log(History); // ƒ History() { [native code] }
      console.log(history);
/*
History
length: 1
scrollRestoration: "auto"
state: null
__proto__: History
  back: ƒ back()
  forward: ƒ forward()
  go: ƒ go()
  length: (...)
  pushState: ƒ pushState()
  replaceState: ƒ replaceState()
  scrollRestoration: (...)
  state: (...)
  constructor: ƒ History()
  Symbol(Symbol.toStringTag): "History"
  get length: ƒ length()
  get scrollRestoration: ƒ scrollRestoration()
  set scrollRestoration: ƒ scrollRestoration()
  get state: ƒ state()
  __proto__: Object
*/
      /** 3个属性*/
      // + length(Read only): 表示会话历史记录中的历史数量 包括当前加载的页面 例如 对于新打开的选项卡 值就为1

      // + scrollRestoration:
      //    + auto/*←默认值*/: The location on the page to which the user has scrolled will be restored.
      //    + manual: The location on the page is not restored. The user will have to scroll to the location manually.

      // + state(Read only): 返回历史堆栈顶部表示状态的用户自定义的值。这是一种查看状态而不必等待popstate事件的方法。
      //  The value is null until the pushState() or replaceState() method is used.

      window.addEventListener('popstate', (event) => {
        /** 这种情况下(即调用pushState改变历史栈)不会触发popstate事件,
         * 这也是为什么说 直接通过history.state访问 “是一种查看状态而不必等待popstate事件的方法”。
         * >https://developer.mozilla.org/en-US/docs/Web/API/History 搜索Properties > state*/
        console.log('event:',event)
      });

      setTimeout(()=>{
        // Should be null because we haven't modified the history stack yet
        console.log(`History.state before pushState: ${history.state}`);

        // Now push something on the stack
        history.pushState({name: 'Example'}, "pushState example", 'page3.html');

        // Now state has a value.
        console.log(`History.state after pushState: ${JSON.stringify(history.state)}`);
      })
    </script>
</body>
</html>
